<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>day2</title>
</head>
<style type="text/css">
h2{
    text-align: center;
}
.body{
    background: yellow;
    width: 300px;
    height: 500px;
    margin: 0 auto;
    border-radius: 130px;
    position: relative;
}
.hair{
    width: 300px;
    height: 50px;
    margin: 0 49%;
}
.hair-1, .hair-2, .hair-3{
    width: 10px;
    height: 50px;
    background: #000;
    float: left;
    margin: 15px 0 0;
}
.hair-1{
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);       /* IE 9 */
    -webkit-transform: rotate(-45deg);   /* Safari and Chrome */
    -o-transform: rotate(-45deg);        /* Opera */
    -moz-transform: rotate(-45deg);
}
.hair-3{
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);       /* IE 9 */
    -webkit-transform: rotate(45deg);   /* Safari and Chrome */
    -o-transform: rotate(45deg);        /* Opera */
    -moz-transform: rotate(45deg);
}
.glass{
    background: #d5c013;
    width: 300px;
    height: 30px;
    margin: 120px 0;
    border-radius: 5px;
    position: absolute;
}
.glass-eyes{
    background: #d5c013;
    width: 130px;
    height: 130px;
    border-radius: 100px;
    float: left;
    z-index: 10;
    position: absolute;
}
.eye{
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    margin: 15px;
}
.eye-left-color, .eye-right-color{
    background: #27aa1d;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    margin: 31px 6px;
    position: absolute;
}
.eye-right-color{
    background: #e3c000;
}
.eye-ball{
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 20px;
    margin: 2px 19px;
}
.mouth{
    width: 71px;
    height: 66px;
    background: #df6f97;
    border-radius: 86px;
    position: absolute;
    top: 185px;
    left: 110px;
}
.no-mouth{
    width: 90px;
    height: 90px;
    border-radius: 35px;
    background: yellow;
    margin: -41px -6px;
    position: absolute;
    z-index: 1;
}
.teeth{
    background: #fff;
    width: 29px;
    height: 32px;
    float: left;
    border-radius: 10px;
}
.bottm-color{
    background: rgb(193, 108, 17);
    width: 324px;
    height: 233px;
    border-radius: 68px;
    position: absolute;
    top: 54%;
    margin: 0 0 0 -10px;
}
.collar-left{
/*  background: rgb(193, 108, 17);
    width: 80px;
    height: 60px;
    border-radius: 111px;
    transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    -moz-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    -webkit-transform: matrix(0.1,0.2,1.9,1.134,9.1,203.3);
    -o-transform: matrix(0.866,0.5,-0.5,0.866,0,0); */
    background: rgb(193, 108, 17);
    width: 36px;
    height: 73px;
    border-radius: 8px;
    -webkit-transform: rotate(54deg) scale(1.232) skew(-60deg) translate(216px);
    position: absolute;
    left: -95px;
    top: 21px;
}
.collar-right{
    background: rgb(245, 242, 143);
    width: 29px;
    border: 5px dotted rgb(254,255,174);
    height: 66px;
    z-index: 100;
    border-radius: 8px;
    -webkit-transform: rotate(-3deg) scale(1.232) skew(-60deg) translate(221px);
    position: absolute;
    left: -66px;
    top: 269px;
}
</style>
<body>
<h2>CSS3绘制小黄人</h2>

<!-- hair -->
<div class="hair">
    <div class="hair-1"></div>
    <div class="hair-2"></div>
    <div class="hair-3"></div>
</div>

<div class="body">
    <!-- eye -->
    <div class="glass"></div>
        <div class="glass-eyes" style="margin:70px 0 0 30px">
            <div class="eye">
                <div class="eye-left-color">
                    <div class="eye-ball"></div>
                </div>
            </div>
        </div>
        <div class="glass-eyes"style="margin:70px 20px 0 144px;">
            <div class="eye">
                <div class="eye-right-color">
                    <div class="eye-ball"></div>
                </div>
            </div>
        </div>
    <!-- mouth -->
    <div class="mouth">
        <div class="no-mouth"></div>
        <div class="teeth" style="margin: 22px 0px 0 7px;"></div>
        <div class="teeth" style="margin: 22px 0px 0 0;"></div>
    </div>

    <div style="width:300px;height:300px;background:#fff;position:absolute;top:60%;"></div>
    <!-- clothes -->
<!--     <div class="collar-left"></div>
    <div class="collar-right"></div>
    <div class="bottm-color"></div> -->
    <!-- left-hand -->
    <!-- right-hand -->
    <!-- left-foot -->
    <!-- right-foot -->
</div>
</body>
</html>